import {defineComponent} from 'vue'
import {get_img, ajax} from "../../../serve";
import {window_go_top} from "@/utils";
import {ElMessage as msg} from "element-plus";
import {Toast as vmsg} from "vant";
import strip from "@/views/browse-view/strip.vue";
import single from "@/views/browse-view/single.vue";
import double from "@/views/browse-view/double.vue";
import {array_sort} from "@/api";
import store from '../../../store';
import {createStore} from "vuex";

export default defineComponent({
    name: 'browse-views',

    // 数据
    data() {
        return {
            // 漫画浏览模式 strip/single/double
            model: 'single',
            // 漫画文件 pdf/img
            type: 'img',
            // 漫画名
            manga: '',
            // 章节名
            chapter: '' as any,
            // 章节列表
            menu: [] as string[],
            // 章节的坐标索引
            index: 0,
            // 开始pdf转换 用于标记setintelval状态 只执行一次
            pdfStart: false,
            // setIntelval 的间隔
            step: 2,
            pdfInfo: {
                // pdf文件的图片总数
                count: 0,
                // pdf转化图片的完成数
                finish: 0,
            },
            // 进度条形状
            progressShape: 'strip',
            // 进度条进度
            percentage: 0,

            // 图片文件列表
            imgFileList: [] as string[],
            // 图片路径列表
            imgPathList: [] as string[],
            // 当前图片页码
            page: -1,
            // 初始加载页码数量
            initPage: 3,
            // 是否正在加载图片
            loading: false,
            // 是否正在重载页面
            refreshing: false,
            // 是否加载完全部图片
            finished: false,

            // 弹出层
            popup: {
                menu: false,
            } as Popup
        }
    },

    // 传值
    props: [],

    // 计算
    computed: {
        // 进度条展示的文本
        progressText() {
            if (this.pdfInfo.count > 0) {
                return '正在转换pdf ' + this.pdfInfo.finish + '/' + this.pdfInfo.count;
            } else {
                return '正在读取pdf信息...';
            }
        },

        // 当前页的图片
        currentSrc(){
            return this.imgFileList[this.page] || [];
        },
    },

    // 组件
    components: {strip, single, double},

    // 方法
    methods: {
        /**
         * 加载图片
         */
        load_img() {
            const list = this.imgPathList;
            const initPage = this.initPage - 1;

            if (this.loading) return;

            // 开启加载状态
            this.loading = true;

            // 无数据 退出
            if (!list.length) return false;

            // 页码递增
            ++this.page;

            // 使用axios请求上传接口
            get_img({
                params: {file: list[this.page]}
            }).then(res => {
                // 获取图片数据,转变为blob链接
                const blob = URL.createObjectURL(res.data);
                // 加入数组
                this.imgFileList.push(blob);

                // 加载结束,更新状态
                this.loading = false;
                this.refreshing = false;
                // 是否加载完全部
                this.finished = this.page === this.imgPathList.length - 1;
                // 是否完成页面初始化加载,未完成则再次加载图片
                this.page < initPage && this.load_img();
            }).catch(error => {
                this.loading = false;
                --this.page;
                this.load_img();
            });
        },

        /**
         * 刷新页面 重载列表
         */
        refresh_page() {
            // 重置图片数据
            this.imgFileList = [];
            this.page = -1;

            // 开始加载图片
            this.load_img();
        },

        /**
         * 重载页面
         */
        reload_page() {
            // 重置图片数据
            this.imgPathList = [];
            this.imgFileList = [];
            this.page = -1;

            // 重置滚动条
            window_go_top();

            this.update_image_list();
        },
        /**
         * 上一页
         * */
        before() {

            if (this.index == 0) {
                msg('已经到了第一章');
                return false;
            }

            // 更新缓存
            this.updata_cache(--this.index);

            /**
             * 刷新页面
             * 自定义重载方法没有重置滚动条,导致vant list不断触发触底事件
             * 因此暂时采用刷新页面的方式解决
             */
            this.reload_page();

        },
        /**
         * 下一页
         * */
        next() {
            if (this.index == this.menu.length - 1) {
                msg('已经到了最后一章');
                return false;
            }

            // 更新缓存
            this.updata_cache(++this.index);

            // 刷新页面
            this.reload_page();

        },

        /**
         * 跳页
         * @param page
         */
        page_change(page: number) {
            console.log(page);
            this.page = page - 1;
            get_img({params: {file: this.imgPathList[this.page]}}).then(res => {
                this.imgFileList[this.page] = URL.createObjectURL(res.data);
            })
        },
        /**
         * 选择章节
         * @param index
         */
        change_chapter(index: any) {
            // 加载中不允许切换目录
            if (this.loading) {
                vmsg.fail('图片加载中，请稍后切换！');
                return false;
            }

            // 更新缓存数据
            this.updata_cache(index);

            // 重载页面
            this.reload_page();

            this.open_popup('menu', false);
        },

        /**
         * 获取名称与章节
         * 通过缓存的方式记录现在的章节与漫画名称
         * 有传参则使用传参值，没有则调取缓存
         * @param name
         */
        get_manga_value(name: string) {
            let value: any = this.$route.query[name];

            //读取写入缓存
            if (value) {
                localStorage.setItem(name, value)
            } else {
                value = localStorage.getItem(name);
                if (name === 'menu') {
                    value = value.split(',')
                }
            }

            return value;
        },

        /**
         * 更新 漫画名 章节 章节坐标
         */
        updata_cache(index: any) {
            // 章节列表
            const menu = this.menu;
            this.index = index;

            // 设置章节索引
            localStorage.setItem('index', index);

            // 设置章节名称
            const chapter = this.chapter = menu[index];
            localStorage.setItem('chapter', chapter);
        },

        /**
         * 弹出层开关操作
         * @param name
         * @param bool
         */
        open_popup(name: string, bool: any = true) {
            this.popup[name] = bool;
        },

        // 阅读状态控制
        reading_state_update(bool = true) {
            // this.$store.commit('reading_state_update', bool);
        },

        /**
         * 更新图片列表
         */
        update_image_list() {
            // 获取漫画名与章节
            const manga = this.manga;
            const chapter = this.chapter;

            ajax.post("php/get-image-list.php", {imagePath: manga + "/" + chapter})
                .then(r => {
                    // 获取数据
                    const data = r.data;
                    this.type = data.type;
                    // img模式
                    if (data.type === 'img') {
                        // 加入数据渲染页面
                        this.imgPathList = data.list;
                        // 开始加载图片
                        this.load_img();

                        return 'img';
                    }

                    // pdf模式
                    if (data.type === 'pdf') {
                        // (已有缓存 | 再次加载) 装载图片
                        if (data.list) {
                            this.imgPathList = data.list;
                            if (this.page < 0) this.load_img();
                            return;
                        }

                        // 首次加载调用pdf转换
                        if (!this.pdfStart) {
                            this.wait_pdf_conversion(data.target);
                            this.type = 'pdf';
                            this.pdfStart = true;
                        }
                    }

                })
        },

        /**
         * 等待pdf转换图片 并获取转换信息
         */
        wait_pdf_conversion(target: string) {
            const inter = setInterval(() => {
                ajax.post('php/get-pdf-conversion.php', {target}).then(res => {
                    const finish = this.pdfInfo.finish;
                    const data = res.data;

                    // 读取中的伪进度更新
                    if (this.pdfInfo.finish == 0) {
                        this.percentage = this.percentage >= 50 ? 50 : this.percentage + 1;
                    }

                    // 进度更新
                    if (data.finish > finish) {
                        this.update_image_list();
                        this.finished = false;
                        this.percentage = 50 + Math.floor(data.finish / data.count * 100 / 2);
                    }

                    this.pdfInfo = data;

                    if (this.pdfInfo.count > 0 && this.pdfInfo.finish === this.pdfInfo.count) {
                        // 使进度条消失
                        const progress: any = this.$refs.progressBox;
                        progress.classList.add('top-disappear');

                        // 清除定时器
                        clearInterval(inter);
                    }
                });
            }, this.step * 1000);
        },
    },

    // 生命周期
    created() {
        const manga: any = this.manga = this.get_manga_value('manga');
        const chapter: any = this.chapter = decodeURI(this.$route.query.chapter as any);

        ajax.post("php/get-chapter-list.php", {chapterPath: manga}).then(r => {
            const data = r.data.map((i: any) => {
                return i.name;
            });

            const menu = this.menu = data;
        }).then(() => {
            const index: any = this.index = this.menu.indexOf(chapter);
            localStorage.setItem('index', index);

            // 按需修改初始化页
            switch (this.model) {
                case 'single':
                    this.initPage = 1;
                    break;
                case 'double':
                    this.initPage = 2;
                    break;
                default:
                    this.initPage = 3;
            }

            // 加载页面
            this.reload_page();

            // 关闭菜单
            this.reading_state_update(true);
        })


    },
    mounted(): void {
    },
    updated(): void {

    }
})